<template>
  <el-card shadow="never">
    <template #header>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="Plus" @click="">
            新增
          </el-button>
        </el-col>
      </el-row>
    </template>
    <el-table :data="workOrders" style="width: 100%">
      <el-table-column label="序号" type="index" align="center" width="50" :index="indexMethod" />
      <el-table-column prop="id" label="工单id" width="180" />
      <el-table-column prop="title" label="工单标题" width="180" />
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="status" label="状态" width="120" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status" type="success" size="small">已审核</el-tag>
          <el-tag v-else type="danger" size="small">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200" />
      <el-table-column prop="reviewer" label="审核人" width="120" />
      <el-table-column prop="reviewTime" label="审核时间" width="200" />
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const state = reactive({
  page: {
    pageSize: 10,
    pageNum: 1,
  },
})

// 计算序号的方法
const currentPage = computed(() => state.page.pageNum)
const indexMethod = (index: number) => {
  return (currentPage.value - 1) * state.page.pageSize + index + 1 // 计算序号，假设pageSize是你每页的大小
}
// 模拟工单数据
const workOrders = ref([
  {
    id: 4687812160674386433,
    title: '问题工单',
    content: '智慧工厂道路路灯1已离线',
    status: false,
    createTime: '2025-06-01 09:00:00',
    reviewer: '张伟',
    reviewTime: ''
  },
  {
    id: 8956732456789012345,
    title: '故障工单',
    content: '华普工厂3号厂房灯1故障',
    status: true,
    createTime: '2025-06-03 14:30:00',
    reviewer: '李华',
    reviewTime: '2025-06-03 16:00:00'
  },
  {
    id: 35978901234567890123,
    title: '问题工单',
    content: '华普工厂行政大楼灯1已离线',
    status: false,
    createTime: '2025-06-05 11:15:00',
    reviewer: '赵强',
    reviewTime: ''
  }
]);
</script>

<style scoped>
</style>